<script>

export default {
	data() {
		return {
			dialogVisible: false,
			stationFormList:[]
		}
	},
	props: {
		tableColumns: Array,
		tableConfig: Object
	},
	mounted() {
        this.stationFormList.push({
            stationName:'',
            stationCode:'',
            stationDes:''
        })
	},
	methods: {
		openDia() {
			this.dialogVisible = true;
		},
		createForm(){
      this.$HttpService.post(`/api/station`,{
      ...this.stationFormList
      }).then(()=>{
                this.$message.success('添加成功！')
            })
		},
		deleteStation(){
			this.$confirm(`确认要删除这条数据吗？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				//todo
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除！'
				})
			})
		},
		clearForm(){
			this.tableColumns.forEach(x=>{
				this.$set(this.distForm, x.id, '')
				if (x.required) {
          this.$HttpService.get(x.required).then(res=>{
						x['requiredData'] = res;
					})
				}
			})
		},
		setBackData(sendMsg){
			this.gmForm = {...sendMsg}
		},
		handleClose() {
			this.dialogVisible = false;
		},
		pullData() {
			this.distForm.parentDistrictCode = this.distForm.parentDistrictCode[0];
			this.distForm['districtName'] = this.distForm.name;
      this.$HttpService.post('/t-district/findTreeAuth',{
					...this.distForm,
					state:'1'
				}).then(()=>{
				this.$message.success('添加成功！')
				this.dialogVisible = false;
				this.$emit('onSuccess');
			})
		},

	}
}
</script>

<template>
	<el-dialog
		title="为区划设置站点"
		:visible.sync="dialogVisible"
		width="30%"
		:before-close="handleClose">
		<div class="center">
			<div class="row-out" v-for="(x,i) in stationFormList" :key="x.id">
				<div class="row">
					<el-form ref="form" label-width="100px" :model="x">
						<el-form-item label="站点名称" prop="stationName">
							<el-input :placeholder="`请输入站点名称`" v-model="x['stationName']"></el-input>
						</el-form-item>
						<el-form-item label="站点描述" prop="stationDes">
							<el-input :placeholder="`请输入站点描述`" v-model="x['stationDes']"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="station-name" v-show="stationFormList.length > 1">
					站点
					<span>{{i+1}}</span>
					<i @click="deleteStation(x)" title="删除该站点" class="el-icon-circle-close delete-station"></i>
				</div>
				
			</div>
			<div class="opa">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="success" @click="createForm">新增站点</el-button>
				<el-button type="primary" @click="pullData">确 定</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<style scoped>
.center {
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 15%;
	min-height: 200px;
	.row-out{
		width: 100%;
		border-bottom: 1px dashed #dcdfe6;
		padding: 10px;
		position: relative;
	}
	.row-out:last-child{
		border: 0!important;
	}
	.row{
		padding-left: 30px;
		width: 80%;
		text-align: center;
	}
	.delete-station{
		color: red;
		font-weight: bold;
		font-size: 16px;
		transition: all .5s;
		cursor: pointer;
	}
	.delete-station:hover{
		transition: all .5s;
		scale: 1.2;
	}
	.station-name{
		position: absolute;
		right: 10px;
		bottom: 20px;
		span{
			color: #42b983;
			font-weight: bold;
			font-size: 16px;
		}
	}
	.opa{
		padding-top: 20px;
		padding-left: 130px;
        text-align: right;
	}
}
</style>
